<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性setter</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <p>First name: <input type="text" v-model="firstName"></p>
        <p>Last name: <input type="text" v-model="lastName"></p>
        <p>fullname: {{fullname}}</p>
        <button @click="change">改变fullname</button>
    </div>
     
    <script>
        let app = new Vue({
          el:"#app",  
          data: { 
            firstName: '',
            lastName: '' 
        },
        methods:{
            change(){
                this.fullname = 'Harry Potter';
            }
        },
        computed:{
            fullname:{
                //getter 用于读取
                get: function(){
                    return this.firstName+' '+this.lastName;
                },
                //setter 写入时触发
                set: function(newVal){
                    var arr = newVal.split('');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        }
    }) 
    </script>
</body>
</html>